<template>
  <el-form ref="addGoodSortFormRef" 
      :model="addGoodSortObj" label-width="150px" 
      :rules="addGoodSortRules">

    <!-- 添加分类名 -->
    <el-form-item label="添加分类名:" prop="cat_name">
      <el-input v-model="addGoodSortObj.cat_name"></el-input>
    </el-form-item>

    <!-- 级联选择器 -->
    <!-- v-model选中保存在一个数组 -->
    <!-- options绑定的数据 -->
    <!-- props对象，lable显示的数据名  value选择数据的值  children子节点 -->
    <el-form-item label="父级分类:" props="casader">
      <el-cascader
        v-model="selectorArray"
        :options="sortList"
        :props="addSortProps"
        clearable 
        ref="cascaderRef"/>
      </el-form-item>
   

  </el-form>
</template>

<script>
// 网络
import { postAddGoodSort } from '@/network/goodSortRequest';

export default {
  data() {
    return {
      addGoodSortObj: {
        cat_pid: 0, // 分类父级id （如果要添加1级分类，则父分类Id应该设置为  0）
        cat_name: '', // 分类名称
        cat_level: 0, // 分类层级 (0表示一级分类；1表示二级分类；2表示三级分类)
      },
      addGoodSortRules: {
        'cat_name': [{ required: true, message: '请输入添加的名称', trigger: 'blur' },]
      },
      addSortProps: { // 添加表单分类配置项
        label: 'cat_name', // 显示的值
        value: 'cat_id', // 选中的值
        children: 'children', // 子节点
        checkStrictly: true, // 可以选择任意一级节点
      },
      selectorArray: [], // 选中的id
    }
  },
  props: {
    sortList: Array, // 父级分类列表
  },
  methods: {
    restForm() { // 初始化表单
      this.$refs['addGoodSortFormRef'].resetFields();
      this.$refs.cascaderRef.$refs.panel.clearCheckedNodes(); //清空选中的节点
    },
    beforeSendAddSortFunc () { // 提交前整理提交数据
      // 重置操作
      this.addGoodSortObj.cat_pid = 0;
      this.addGoodSortObj.cat_level = 0;
    
      if (this.selectorArray.length > 0) {
        this.addGoodSortObj.cat_pid = this.selectorArray[this.selectorArray.length - 1]; // 该属性的父级id
        this.addGoodSortObj.cat_level = this.selectorArray.length; // 该属性的等级
      }
      // console.log(this.addGoodSortObj);
      // console.log(this.selectorArray);
      this.$refs['addGoodSortFormRef'].validate(val => {
        if (!val) {
          return this.$message.error('提交失败，请按照提示将表单填写完整！');
        }
        return this.requestAddSortData(); // 网络请求
      })
      
    },
    async requestAddSortData() { // 提交数据网络请求
      console.log('网络请求中');
      const {meta, data} = await postAddGoodSort(this.addGoodSortObj);
      if (meta.status !== 201) {
        console.log(meta, data);
        return this.$message.error(meta.msg);
      }
      // 重新获取分类数据
      this.$bus.$emit('getAllGoodsInfo');
      this.$bus.$emit('closeGoodSortDialog'); // 关闭dialog组件
      return this.$message.success(meta.msg);
    }
  },
  created() {
    this.$bus.$on('restForm', this.restForm);
    this.$bus.$on('beforeSendAddSortFunc', this.beforeSendAddSortFunc);
  },
  destroyed() {
    this.$bus.$off('restForm');
    this.$bus.$off('beforeSendAddSortFunc');
  }
}
</script>

<style lang="scss" scoped>
  .el-cascader {
    width:100%;
  }
</style>